<template>
  <div class="guide-page" :class="{ guideActive: isShowMask }">
    <van-overlay :show="isShowMask" class="custom-mask">
      <van-image
        class="guide-icon"
        :src="guideIcon"
        v-if="isShowMask"
        width="60%"
        height="auto"
        fit="contain"
      ></van-image>
    </van-overlay>

    <download-header
      @goShopping="onClickDownload"
      :userCreditLimit="userCreditLimit"
      class="region top"
    ></download-header>
    <div class="region bottom">
      <van-image :src="logo" width="120" height="120" class="logo"></van-image>
      <div class="title">{{ title }}</div>
      <div v-if="deviceType == DeviceType.IOS" class="ios">
        <div class="ios-tip">IOS签名版，正常使用需要操作如下:</div>
        <div class="ios-step">设置—通用—VPN与设备管理——点击信任</div>
      </div>
      <div class="btn">
        <van-button round block color="#FD2F70" @click="onClickDownload">
          <div class="btn-content">
            <van-image :src="icon" width="28" height="28"></van-image>
            <span class="btn-content-text">{{ btnText }}</span>
          </div>
        </van-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  computed,
  onBeforeMount,
  PropType,
} from "vue";
import { mockApi, checkBrowser } from "@/utils/util";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
import isoIcon from "@/assets/channel/ios-icon.png";
import androidIcon from "@/assets/channel/android-icon.png";
import logo from "@/assets/channel/logo.png";
import guideIcon from "@/assets/channel/guide-top.png";
import downloadHeader from "./downloadHeader.vue";
import { DeviceType, BrowserTypeBrief } from "@/const/emun";
import { getUserInfo } from "@/api/user.ts";

const props = defineProps({
  deviceType: {
    type: String as PropType<DeviceType>,
    default: DeviceType.ANDROID,
    validator: (value: DeviceType) => {
      return Object.values(DeviceType).includes(value);
    },
  },
  download: {
    type: Boolean,
    default: false,
  },
});

const isClickDownload = ref(false); //用户点击下载并且是微信浏览器展示蒙层

const userCreditLimit = ref(0);
const title = ref(import.meta.env.VITE_APP_TITLE);

const route = useRoute();

const { isDownload, creditLimit } = route.query;
console.log(route);

const browserType: BrowserTypeBrief = checkBrowser();

const isShowMask = computed(() => {
  // return true;
  return browserType == BrowserTypeBrief.WECHAT && isClickDownload.value;
});

const icon = computed(() => {
  return props.deviceType == DeviceType.ANDROID ? androidIcon : isoIcon;
});

const btnText = computed(() => {
  return props.deviceType == DeviceType.ANDROID ? "Android下载" : "iphone下载";
});

// const route = useRoute();
const router = useRouter();

const downloadApk = () => {
  if (props.deviceType == DeviceType.IOS) {
    // showToast("ios download");
    let downLoadUrl = import.meta.env.VITE_APP_DOWNLOAD_IOS;
    window.location.href = downLoadUrl;
  } else if (props.deviceType == DeviceType.ANDROID) {
    let downLoadUrl = import.meta.env.VITE_APP_DOWNLOAD_ANDROID;
    window.location.href = downLoadUrl;
  }
};

onMounted(async () => {
  isClickDownload.value = false;
  // onMounted(() => {
  // console.log("isShowMask", isShowMask.value);
  // console.log("isWechatBrowser", BrowserTypeBrief.WECHAT == browserType);
  // console.log("query isDownload", isDownload);
  // console.log("query creditLimit", creditLimit);
  if (props.download || isDownload) {
    userCreditLimit.value = Number(creditLimit);
    downloadApk();
  } else {
    const res = await getUserInfo();
    //test
    // res.data.userCreditLimit = 1000;
    userCreditLimit.value = res.data.userCreditLimit;
  }
});

const onClickDownload = () => {
  if (userCreditLimit.value <= 0) {
    showToast("综合评分不足,无法下载app！");
    return;
  }
  if (userCreditLimit.value)
    // 微信浏览器进入引导页面
    console.log("browsertype: ", browserType);
  // downloadApk();
  if (browserType == BrowserTypeBrief.WECHAT) {
    isClickDownload.value = true;
    router.push({
      path: "/guide",
      query: { isDownload: "1", creditLimit: userCreditLimit.value },
    });
  } else {
    downloadApk();
  }
};
</script>

<style lang="scss" scoped>
.guide-page {
  min-height: 100%;
  padding: 20px;
  background-color: #f6f4f4;
  .custom-mask {
    background: rgba(0, 0, 0, 0.5);
    .guide-icon {
      position: absolute;
      top: 16px;
      right: 16px;
    }
  }
  .region {
    padding: 60px 24px 20px;
  }
  .region + .region {
    margin-top: 10px;
  }
  .bottom {
    border-radius: 10px;
    background-color: #fff;
    // padding: 15px;
    padding-top: 20px;
    width: 100%;
    // background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    // background-image: url("@/assets/channel/download-bg.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      // margin-top: 300px;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      margin: 10px auto 40px;
    }
    .ios {
      text-align: center;
      line-height: 1.8;
      &-tip {
        color: #b7b7b7;
        font-size: 12px;
      }
      &-step {
        color: #fd2f70;
        margin-bottom: 10px;
      }
    }
    .btn {
      width: 100%;
      // margin: 10px 40px;
      margin-bottom: 10px;
    }
    .btn-content {
      display: flex;
      align-items: center;
      &-text {
        margin-left: 10px;
      }
    }
  }
  .guideActive {
    position: relative;
  }
}
</style>
